﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../assets/css/yui-cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
    <script src="../../../ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="../../../scripts/yui-source.js"></script> -->
    <script>
        $(document).ready(function(){
            $.getJSON("../assets/json/easel_class_list.json",function(res){
                //console.log(res);
                let node=$("#api-classes");
                node.html("");
                for(let i=0;i<res.length;i++){
                    node.append("<li><a href=\"../classes/"+res[i]+".html\">"+res[i]+"</a></li>");
                }
                
            });
        });
    </script>
	<title>EaselJS v1.0.0 API Documentation : EaselJS</title>
</head>
<body class="yui3-skin-sam">
    <div id="doc">
        <div id="hd" class="yui3-g header">
            <div class="yui3-u-3-4">
                <h1><a href="/easeljs"><img src="../assets/docs-icon-EaselJS.png" title="EaselJS"></a></h1>
            </div>
            <div class="version">
                <em>API Documentation for: 1.0.0</em>
            </div>
        </div>
        <div id="bd" class="yui3-g">
            <div class="yui3-u-1-4">
                <div id="docs-sidebar" class="sidebar apidocs">
                    <div id="api-list">
                        <h2 class="off-left">APIs</h2>
                        <div id="api-tabview" class="tabview">
                            <ul class="tabs">
                                <li><a href="#api-classes">Classes</a></li>
                            </ul>
                        <div id="api-tabview-filter">
                            <input type="search" id="api-filter" placeholder="Type to filter APIs">
                        </div>
                        <div id="api-tabview-panel">
                            <ul id="api-classes" class="apis classes">
                                <!-- 从easel_class_list.json读取数据 -->
                            </ul>
                            <ul id="api-modules" class="apis modules">
                                <li><a href="CreateJS.html">CreateJS</a></li>
                                <li><a href="EaselJS.html">EaselJS</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
            <div id="api-options">
                Show:
                <label for="api-show-inherited">
                    <input type="checkbox" id="api-show-inherited" checked="">
                    Inherited
                </label>
                <label for="api-show-protected">
                    <input type="checkbox" id="api-show-protected">
                    Protected
                </label>
                <label for="api-show-private">
                    <input type="checkbox" id="api-show-private">
                    Private
                </label>
                <label for="api-show-deprecated">
                    <input type="checkbox" id="api-show-deprecated">
                    Deprecated
                </label>
            </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>EaselJS Module</h1>

<div class="box clearfix meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/easeljs_version.js.html#l9"><code>EaselJS:9</code></a>
        </div>
    

    
</div>



<div class="box intro">
    <p>EaselJS Javascript库为canvas提供了一个保留的图形模式，包括完整的分层显示列表、核心交互模型和助手类，以使在canvas中处理二维图形更加容易。EaselJS为使用HTML5画布处理丰富的图形和交互性提供了直截了当的解决方案。</p>
<p><h4>Getting Started</h4>
在开始使用Easel前，先创建一个<a href="../classes/Stage.html" class="crosslink">Stage</a>去包装CANVAS元素，然后把
<a href="../classes/DisplayObject.html" class="crosslink">DisplayObject</a>实例作为子对象添加到舞台。EaselJS支持如下特性：
<ul>
     <li>图片使用 <a href="../classes/Bitmap.html" class="crosslink">Bitmap</a></li>
     <li>矢量图形使用 <a href="../classes/Shape.html" class="crosslink">Shape</a> 和 <a href="../classes/Graphics.html" class="crosslink">Graphics</a></li>
     <li>使用 <a href="../classes/SpriteSheet.html" class="crosslink">SpriteSheet</a> 和 <a href="../classes/Sprite.html" class="crosslink">Sprite</a> 的动画位图</li>
     <li>使用 <a href="../classes/Text.html" class="crosslink">Text</a> 的简单文本实例</li>
     <li>使用 <a href="../classes/Container.html" class="crosslink">Container</a> 包含其他显示对象</li>
     <li>使用 <a href="../classes/DOMElement.html" class="crosslink">DOMElement</a> 控制HTML DOM元素</li>
</ul>

<p>所有显示对象都可以作为子对象添加到舞台，或直接绘制到画布。</p>
<p><b>User Interactions</b></p>
<p>当使用鼠标或触摸进行交互时，舞台上的所有显示对象 (<a href="../classes/DOMElement.html" class="crosslink">DOMElement</a> 除外) 将调度事件。EaselJS支持悬停、按下和释放事件，以及易于使用的拖放模型。查看 <a href="../classes/MouseEvent.html" class="crosslink">MouseEvent</a> 以了解更多信息。</p>
<p><h4>Simple Example</h4>
本示例演示了如何使用 &#39;EaselJS&#39;的绘图API在 <a href="../classes/Stage.html" class="crosslink">Stage</a> 上创建和定位 <a href="../classes/Shape.html" class="crosslink">Shape</a>。
<pre class="code prettyprint"><code>    //通过获取对canvas的引用来创建舞台
    stage = new createjs.Stage("demoCanvas");
    //创建一个图形对象
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40);
    //设置Shape实例的坐标
    circle.x = circle.y = 50;
    //将Shape实例添加到舞台显示列表
    stage.addChild(circle);
    //将在下一帧渲染时刷新舞台
    stage.update();</code></pre>
<p><b>Simple Interaction Example</b></p>
<pre class="code prettyprint"><code> displayObject.addEventListener("click", handleClick);
 function handleClick(event){
     // 点击后执行的动作
 }

 displayObject.addEventListener("mousedown", handlePress);
 function handlePress(event) {
     // 当鼠标按下时触发
     // 监听鼠标按下时的移动:
     event.addEventListener("mousemove", handleMove);
 }
 function handleMove(event) {
     // Check out the DragAndDrop example in GitHub for more
 }</code></pre>
<p><b>Simple Animation Example</b></p>
<p>使用上一个演示案例中创建的shape在屏幕上移动。</p>
<pre class="code prettyprint"><code>    //实时刷新舞台
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //圆圈将向右移动10个像素
        circle.x += 10;
        //圆圈会循环运动
        if (circle.x &gt; stage.canvas.width) { circle.x = 0; }
        stage.update();
    }</code></pre>
<p><h4>Other Features</h4>
EaselJS还内置了如下功能：
<ul>
    <li>Canvas功能，例如 <a href="../classes/Shadow.html" class="crosslink">Shadow</a> 和合成操作。</li>
    <li><a href="../classes/Ticker.html" class="crosslink">Ticker</a>，是一个可监听的全局心跳对象。</li>
    <li>滤镜, 包括提供 <a href="../classes/ColorMatrixFilter.html" class="crosslink">ColorMatrixFilter</a>, <a href="../classes/AlphaMaskFilter.html" class="crosslink">AlphaMaskFilter</a>,
    <a href="../classes/AlphaMapFilter.html" class="crosslink">AlphaMapFilter</a>，和 <a href="../classes/BlurFilter.html" class="crosslink">BlurFilter</a>。查看 <a href="../classes/Filter.html" class="crosslink">Filter</a>
    获取更多信息。</li>
    <li>一个 <a href="../classes/ButtonHelper.html" class="crosslink">ButtonHelper</a> 帮助类, 用于创建交互式按钮。</li>
    <li><a href="../classes/SpriteSheetUtils.html" class="crosslink">SpriteSheetUtils</a> 和一个 <a href="../classes/SpriteSheetBuilder.html" class="crosslink">SpriteSheetBuilder</a> 用于运行时构建和管理 <a href="../classes/SpriteSheet.html" class="crosslink">SpriteSheet</a> 功能。</li>
</ul>

<p><h4>浏览器支持</h4>
所有支持Canvas的现代浏览器都支持EaselJS (<a href="http://caniuse.com/canvas"><a href="http://caniuse.com/canvas">http://caniuse.com/canvas</a>)。
浏览器性能可能因平台而异，例如，Android Canvas对硬件支持比较弱，而且平均比大多数其他浏览器慢。
</div>



<div class="yui3-g">
    <div class="yui3-u-1-2">
        
            <p>本模块提供以下类：</p>

            <ul class="module-classes">
            
                <li class="module-class">
                    <a href="../classes/AlphaMapFilter.html">
                        AlphaMapFilter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/AlphaMaskFilter.html">
                        AlphaMaskFilter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Bitmap.html">
                        Bitmap
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/BitmapCache.html">
                        BitmapCache
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/BitmapText.html">
                        BitmapText
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/BlurFilter.html">
                        BlurFilter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/ButtonHelper.html">
                        ButtonHelper
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/ColorFilter.html">
                        ColorFilter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/ColorMatrix.html">
                        ColorMatrix
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/ColorMatrixFilter.html">
                        ColorMatrixFilter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Container.html">
                        Container
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/DisplayObject.html">
                        DisplayObject
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/DisplayProps.html">
                        DisplayProps
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/DOMElement.html">
                        DOMElement
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/EaselJS.html">
                        EaselJS
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Filter.html">
                        Filter
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.html">
                        Graphics
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Arc.html">
                        Graphics.Arc
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.ArcTo.html">
                        Graphics.ArcTo
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.BeginPath.html">
                        Graphics.BeginPath
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.BezierCurveTo.html">
                        Graphics.BezierCurveTo
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Circle.html">
                        Graphics.Circle
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.ClosePath.html">
                        Graphics.ClosePath
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Ellipse.html">
                        Graphics.Ellipse
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Fill.html">
                        Graphics.Fill
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.LineTo.html">
                        Graphics.LineTo
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.MoveTo.html">
                        Graphics.MoveTo
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.PolyStar.html">
                        Graphics.PolyStar
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.QuadraticCurveTo.html">
                        Graphics.QuadraticCurveTo
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Rect.html">
                        Graphics.Rect
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.RoundRect.html">
                        Graphics.RoundRect
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.Stroke.html">
                        Graphics.Stroke
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.StrokeDash.html">
                        Graphics.StrokeDash
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Graphics.StrokeStyle.html">
                        Graphics.StrokeStyle
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Matrix2D.html">
                        Matrix2D
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/MouseEvent.html">
                        MouseEvent
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/MovieClip.html">
                        MovieClip
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/MovieClipPlugin.html">
                        MovieClipPlugin
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Point.html">
                        Point
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Rectangle.html">
                        Rectangle
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Shadow.html">
                        Shadow
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Shape.html">
                        Shape
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Sprite.html">
                        Sprite
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/SpriteSheet.html">
                        SpriteSheet
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/SpriteSheetBuilder.html">
                        SpriteSheetBuilder
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/SpriteSheetUtils.html">
                        SpriteSheetUtils
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Stage.html">
                        Stage
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/StageGL.html">
                        StageGL
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Text.html">
                        Text
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/Touch.html">
                        Touch
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/UID.html">
                        UID
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/VideoBuffer.html">
                        VideoBuffer
                    </a>
                </li>
            
                <li class="module-class">
                    <a href="../classes/WebGLInspector.html">
                        WebGLInspector
                    </a>
                </li>
            
            </ul>
        
    </div>

    <div class="yui3-u-1-2">
        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<!-- <script src="../assets/js/yui-prettify.js"></script>
<script src="../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script> -->
</body>
</html>
